<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>编辑发送系统消息</span>
        <el-button type="success" @click="sendNotice()" style="float: right; padding: 5px 12px">
          发送
        </el-button>
      </div>
      <el-form ref="dataForm" :rules="rules" :model="temp" label-width="120px" style="margin-top: 10px">
        <el-col :span="12">
          <el-form-item label="消息标题" prop="noticeTitle">
            <el-input v-model="temp.noticeTitle" placeholder="请填写消息标题" style="width: 600px" />
          </el-form-item>
          <el-form-item label="消息简介" prop="noticeDesc">
            <el-input v-model="temp.noticeDesc" placeholder="请填写消息概览" style="width: 600px" type="textarea" :rows="2" />
          </el-form-item>
          <el-form-item label="消息内容" prop="noticeContent">
            <tinymce v-model="temp.noticeContent" :height="370" :width="600" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="消息类型" prop="noticeType">
            <el-select v-model="temp.noticeType" style="width: 200px;" class="filter-item">
              <el-option v-for="item in noticeTypeList" :key="item.key" :label="item.value" :value="item.key" />
            </el-select>
          </el-form-item>
          <p style="margin-left: 50px; font-size: 12px"><el-icon class="el-icon-info"></el-icon> 发送对象仅限当前分局的用户</p>
          <el-form-item label="发送对象">
            <el-radio v-model="sendRange" :label="1">全平台用户</el-radio>
            <el-radio v-model="sendRange" :label="2">民警</el-radio>
            <el-radio v-model="sendRange" :label="3">辅警</el-radio>
            <el-radio v-model="sendRange" :label="4">选择用户</el-radio>
          </el-form-item>
          <el-transfer
            v-if="sendRange===4"
            v-model="transferUsersValue"
            v-loading="transferLoading"
            :data="transferUsersAll"
            filterable
            filter-placeholder="输入用户名搜索"
            :titles="['用户列表', '已选用户']"
            style="margin:15px 50px"
          />
        </el-col>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getNotice, sendNotice } from '@/api/notice'
import waves from '@/directive/waves' // waves directive
import ImgUploadSingle from '@/components/ImgUpload/ImgUploadSingle'
import Tinymce from '@/components/Tinymce'
import { getUsersPlainList } from '@/api/users'

export default {
  name: 'NoticeEdit',
  components: { ImgUploadSingle, Tinymce },
  directives: { waves },
  data() {
    return {
      formLoading: true,
      selectLoading: true,
      temp: {
        noticeId: undefined,
        noticeType: '',
        noticeTitle: '',
        noticeImg: '',
        noticeContent: '',
        userListStr: '',
        departmentId: ''
      },
      rules: {
        noticeTitle: [{ required: true, message: '请填写消息标题', trigger: 'blur' }],
        noticeDesc: [{ required: true, message: '请填写消息简介', trigger: 'blur' }],
        noticeContent: [{ required: true, message: '请填写消息内容', trigger: 'change' }],
        noticeType: [{ required: true, message: '请选择消息类型', trigger: 'change' }],
        userListStr: [{ required: true, message: '请选择用户', trigger: 'change' }]
      },
      noticeTypeList: [
        { key: 0, value: '公告说明' },
        { key: 1, value: '待领取卡券' }
      ],
      sendRange: 1,
      transferUsersAll: [],
      transferUsersValue: [],
      transferLoading: false
    }
  },
  created() {
    this.initForm()
    this.initTransfer()
  },
  methods: {
    initForm() {
      const noticeId = this.$route.params.id
      if (noticeId == 0) {
        console.log('Hello World!')
      } else {
        this.formLoading = true
        getNotice(noticeId).then(response => {
          this.temp = response.data
          this.formLoading = false
        })
      }
    },
    initTransfer() {
      this.transferLoading = true
      this.transferUsersAll = []
      this.transferUsersValue = []
      getUsersPlainList(this.$store.getters.tmpDepartmentId).then(response => {
        const list = response.data
        for (let i = 0; i < list.length; i++) {
          this.transferUsersAll.push({
            key: list[i].userId,
            label: list[i].realName
          })
        }
        setTimeout(() => {
          this.transferLoading = false
        }, 100)
      })
    },
    sendNotice() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          let userListStr = ''
          if (this.sendRange === 1) {
            userListStr = 'all'
          } else if (this.sendRange === 2) {
            userListStr = 'mj'
          } else if (this.sendRange === 3) {
            userListStr = 'fj'
          } else {
            this.transferUsersValue.forEach(value => {
              userListStr += value + ','
            })
            if (userListStr.length <= 0) {
              this.$message({
                message: '至少选择一名用户！',
                type: 'warning'
              })
              return
            }
          }
          this.temp.userListStr = userListStr
          this.temp.departmentId = this.$store.getters.tmpDepartmentId
          sendNotice(this.temp).then(response => {
            if (response.code === 0) {
              this.$notify({
                title: 'Success',
                message: '消息已发送至用户！',
                type: 'success',
                duration: 2000
              })
              this.$router.push({ name: 'Notice' })
            }
          })
        }
      })
    }
  }
}
</script>
